<template>
  <div>
    <div>
      <div class="zinterrevolution1">
        <div class="zinterrevolution">
          <img src="../assets/img/arrows.png" alt="" @click="gobanck" />
          <a href="">活期转定期</a>
        </div>
      </div>
      <!-- 账户 -->
      <div class="zaccount">
        <div class="zaccount_1">
          <p>交易账户</p>
          <div class="zaccount_2">
            <p>{{ account }}</p>
            <img id="zaccount1" src="../assets/img/箭头4.png" alt="" />
          </div>
        </div>
        <div class="zaccount_1">
          <p>币种</p>
          <div class="zaccount_2">
            <p>人名币/本币</p>
            <img
              id="zcoin11"
              src="../assets/img/箭头4.png"
              alt=""
              onclick="coin11()"
            />
          </div>
        </div>
        <div class="zbalance_111">
          <p>可用余额{{ num }}元</p>
        </div>
      </div>

      <!-- 存期 -->
      <div class="zterm">
        <div class="zterm1">
          <p>选择存期</p>
          <input type="text" placeholder="" onfocus="this.blur()" />
          <span id="zterm3"></span>
          <img
            id="zaccount2"
            src="../assets/img/箭头4.png"
            alt=""
            @click="pullDown"
          />
        </div>
        <div class="zterm2">
          <p>年利率</p>
          <p class="zwhiffletree">{{ interest }}</p>
        </div>
      </div>
      <!-- 金额 -->
      <div class="zfigure">
        <div class="zfigure_1">
          <a href="">转入金额</a>
        </div>
        <div class="zfigure_2">
          <p>￥</p>
          <input
            type="text"
            placeholder="请输入转存金额"
            value=""
            id="zfigure12"
            v-model="money"
          />
        </div>
      </div>
      <span id="zfigure11"></span>
      <!-- -转存   -->
      <div class="zunloading">
        <div class="zunloading1">
          <p>约定转存</p>
          <div id="zround"><van-switch v-model="isShowDeposit" size="24px"/></div>
        </div>
        <div class="zunloading2" id="zunloading2" v-if="isShowDeposit">
          <p>转存存期</p>
          <input type="text" placeholder="请选择转存存期" />
          <img src="../assets/img/箭头4.png" alt="" />
        </div>
      </div>
      <button class="nextStep" @click="ok">下一步</button>
    </div>
    <van-picker
      title=""
      show-toolbar
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      @change="onChange"
      v-if="a == 1"
    />
  </div>
</template>

<script>
import { iccid, balance } from "../api/interrevolution1";
import { Dialog } from "vant";
import { Toast } from "vant";

export default {
  data() {
    return {
      num: "",
      account: "",
      money: "",
      columns: ["3个月", "6个月", "1年", "2年", "3年", "5年"],
      a: 2,
      interest: "",
      // checked: true,
      isShowDeposit:true
    };
  },
  methods: {
    fun() {
      iccid()
        .then((res) => {
          if (res.code == 200) {
            this.num = res.data.depositSum;
          this.account = res.data.currentId;
          }else{
            Dialog({ title: "温馨提示", message: res.msg });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    ok() {
      balance({ money: this.money }).then((res) => {
        if (res.code == 200) {
          Dialog.alert({
            message: "转入成功",
          }).then(() => {
            if(res.code == 200){
              this.$router.push({
              name: "interrevolution",
            });
            }else{
              Dialog({ title: "温馨提示", message: res.msg });
            }
          });
        } else {
          Dialog.alert({
            message: res.msg,
          }).then(() => {
            // on close
          });
        }
      });
    },
    // 返回
    gobanck() {
      this.$router.push({
        name: "interrevolution",
      });
    },
    // 下拉选择
    pullDown() {
      if (this.a == 2) {
        this.a = 1;
      } else {
        this.a = 2;
      }
    },
    onConfirm(value, index) {
      // Toast(`当前值：${value}, 当前索引：${index}`);
      // if(value=="3个月"){
      //   this.interest = "1.25%"
      //   this.a=2
      // }
    let yearobj = {
      "3个月":"1.25%",
      "6个月":"1.45%",
      "1年":"1.65%",          
      "2年":"2.15%",
      "3年":"2.60%",
      "5年":"2.65%"
    };
    this.interest = yearobj[value]
    this.a=2
    },
    onCancel() {
      Toast("取消");
    },
    
  },
  created() {
    this.fun();
  },
};
</script>

<style scoped lang="stylus">
* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: rgb(247, 247, 247);
  height: 835px;
}

.zinterrevolution1 {
  width: 100%;
  height: 40px;
  background-color: rgb(255, 255, 255);
}

.zinterrevolution {
  height: 40px;
  width: 370px;
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.zinterrevolution img {
  height: 25px;
  width: 25px;
}

.zinterrevolution a {
  text-decoration: none;
  color: black;
  font-size: 17px;
  margin-left: 120px;
}

/* 账户 */
.zaccount {
  height: 120px;
  background-color: rgb(255, 255, 255);
  margin-top: 10px;
}

.zaccount_1 {
  height: 40px;
  width: 370px;
  margin: 0 auto;
  /* background-color: aquamarine; */
  border-bottom: 1px solid rgba(190, 186, 186, 0.359);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zaccount_2 {
  display: flex;
  align-items: center;
}

.zaccount_2 p {
  margin-right: 5px;
}

.zaccount_2 img {
  height: 20px;
  width: 2 0px;
}

.zbalance_111 p {
  font-size: 15px;
  margin-left: 230px;
  margin-top: 10px;
}

/* 存期 */
.zterm {
  height: 80px;
  background-color: rgb(255, 255, 255);
  margin-top: 10px;
}

.zterm1 {
  height: 40px;
  width: 370px;
  margin: 0 auto;
  /* background-color: aquamarine; */
  border-bottom: 1px solid rgba(190, 186, 186, 0.447);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zterm1 input {
  height: 40px;
  width: 90px;
  border: 0;
  outline: none;
  margin-left: 150px;
  /* background-color: aquamarine; */
}

.zterm1 img {
  height: 20px;
  width: 20px;
}

.zterm2 {
  height: 40px;
  width: 370px;
  margin: 0 auto;
  /* background-color: aquamarine; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zwhiffletree {
  margin-right: 5px;
}

/* 金额 */
.zfigure {
  height: 91px;
  margin-top: 10px;
  background-color: white;
}

.zfigure_1 {
  height: 40px;
  width: 370px;
  /* background-color: aqua; */
  margin-left: 10px;
  border-bottom: 1px solid rgba(204, 200, 200, 0.449);
}

.zfigure_1 a {
  text-decoration: none;
  color: black;
  line-height: 40px;
}

.zfigure_2 {
  margin: 0 auto;
  width: 370px;
  display: flex;
  border-bottom: 1px solid rgba(204, 200, 200, 0.466);
}

.zfigure_2 p {
  font-size: 35px;
}

.zfigure_2 input {
  border: 0;
  outline: none;
  height: 50px;
  font-size: 20px;
}

#zfigure11 {
  margin-top: 20px;
  height: 30px;
  width: 130px;
  font-size: 15px;
  line-height: 30px;
  margin-left: 10px;
  background-color: rgb(218, 157, 157);
}

/* 转存 */
.zunloading {
  background-color: rgb(255, 255, 255);
  margin-top: 10px;
}

.zunloading1 {
  height: 40px;
  width: 370px;
  margin: 0 auto;
  /* background-color: aquamarine; */
  border-bottom: 1px solid rgba(190, 186, 186, 0.445);
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}

#zround {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  margin-left: 250px;
}

.zunloading2 {
  height: 40px;
  width: 370px;
  margin: 0 auto;
  /* background-color: aquamarine; */
  border-bottom: 1px solid rgba(190, 186, 186, 0.578);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zunloading2 input {
  height: 40px;
  width: 100px;
  border: 0;
  outline: none;
  margin-left: 180px;
}

.zunloading2 img {
  height: 20px;
  width: 20px;
}

/* 提示 */
.zhint {
  height: 170px;
  /* background-color: aqua;next */
  width: 370px;
  margin-top: 10px;
  margin-left: 10px;
}

.zhint p {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.675);
}

.zhint div {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.675);
}

/* 下一步 */
.znext {
  height: 30px;
  width: 370px;
  border-radius: 10px;
  background-color: rgb(255, 230, 181);
  margin: 0 auto;
}

.znext a {
  text-decoration: none;
  line-height: 30px;
  color: rgb(255, 255, 255);
  margin-left: 160px;
}

/* 弹出人名币 */
#zcoin {
  height: 180px;
  width: 100%;
  background-color: white;
  position: absolute;
  bottom: 181px;
}

.zabolish1 {
  background-color: rgba(137, 134, 134, 0.49);
  height: 40px;
}

#zabolish {
  height: 40px;
  width: 370px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#zabolish_1 {
  font-size: 16px;
}

#zabolish_2 {
  color: orange;
}

#zcoin_1 {
  height: 30px;
  border-bottom: 1px solid rgba(137, 134, 134, 0.693);
  border-top: 1px solid rgba(137, 134, 134, 0.693);
  margin-top: 52px;
}

#zcoin_2 {
  line-height: 30px;
  text-align: center;
}

/* 交易账户 */
#zcoin1 {
  height: 180px;
  width: 100%;
  background-color: white;
  position: absolute;
  bottom: 181px;
}

#zabolish_3 {
  font-size: 16px;
}

#zabolish_4 {
  color: orange;
}

/* 选择存期 */
#zmouth {
  display: flex;
  justify-content: space-evenly;
  margin-top: 35px;
}

#zmouth p {
  height: 50px;
  width: 50px;
  background-color: rgba(137, 134, 134, 0.693);
  display: flex;
  align-items: center;
  justify-content: center;
}

#zcoin2 {
  height: 180px;
  width: 100%;
  background-color: white;
  position: absolute;
  bottom: 181px;
}

.nextStep {
  height: 50px;
  width: 370px;
  border-radius: 10px;
  background-color: rgb(255, 226, 168);
  margin-left: 10px;
  margin-top: 40px;
  border: 0;
  color: rgb(255, 255, 255);
  font-size: 20px;
}

/deep/ .van-picker {
  height: 240px;
  width: 100%;
  position: absolute;
  bottom: 0;
}
</style>